<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">

                <div class="media-display">
                    <el-link :underline="false" style="font-size: 20px">权限信息</el-link>
                    <el-divider direction="vertical"></el-divider>

                </div>
                <div style="margin-left: auto">
                    <el-link :underline="false" style="font-size: 20px">当前系统角色：</el-link>
                    <el-button type="warning" plain @click="">super</el-button>
                    <el-button type="primary" plain @click="">admin</el-button>
                    <el-button type="success" plain @click="">user</el-button>
                </div>
            </div>

            <div class="text">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <div class="role-wrap">
                            超级管理员
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="role-wrap">
                            超级管理员
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="role-wrap">
                            超级管理员
                        </div>
                    </el-col>
                </el-row>
            </div>

        </el-card>
    </div>
</template>


<script>
    export default {
        name: "Permission",
        data(){
            return{
                rules: {//修改密码验证规则
                    password: [
                        { required: true, message: '请输入原密码', trigger: 'blur' },
                        { min: 3, message: '长度不小于 3 个字符 ', trigger: 'blur' }
                    ],
                    state: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                    ],
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                    ],
                    email: [
                        { required: true, message: '请输入电子邮箱', trigger: 'blur' },
                    ],
                    phone: [
                        { required: true, message: '请输入电话号码', trigger: 'blur' },
                    ],
                },
                roleArr: [{
                    describe: '超级管理员',
                    value: 1,
                    label: 'super'
                }, {
                    describe: '普通管理员',
                    value: 2,
                    label: 'admin'
                }, {
                    describe: '用户',
                    value: 3,
                    label: 'user'
                }],
            }
        },
        methods : {
            initData(page){//初始化数据
                this.$axios({
                    method : "GET",
                    url:"/admin?method=list&currentPage=" + page,
                }).then((response)=>{
                    console.log(response.data);
                    this.tableData = response.data;
                }).catch((error)=> {
                    console.log(error);
                });
            },

            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
        },
        beforeMount (){//初始化数据
            //this.initData(1)
        },
        mounted(){
        },
    }
</script>

<style scoped>

    .role-wrap{
        height: 1000px;
        background-color: gray;
    }

    *{
        outline: none;
    }
    .clearfix{
        display: flex;
        align-items: center;
    }
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

</style>
